<!--  -->
<template>
  <div>
    <div class="first-term"><p>首页</p></div>
    <div class="selectTop">
      <div class="radio">
        <el-radio-group v-model="selectKey" size="large" @change="keyChange">
          <el-radio-button label="sale_">销量</el-radio-button>
          <el-radio-button label="_money">销售额</el-radio-button>
        </el-radio-group>
      </div>
      <div class="select">
        <el-select
          v-model="selectDay"
          class="m-2"
          placeholder="Select"
          size="large"
          @change="keyChange"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
    </div>
    <div id="main" style="height: 300px; weight: 400px">index</div>
    <div id="main1" style="height: 700px; weight: 400px">index</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, onMounted } from "vue";
import * as echarts from "echarts";
import * as http from "../../request/http";
import chinaJSON from "../../data/china.json";

// 单选框
const selectKey = ref("sale_");
// 下拉框
const selectDay = ref("today");
let salePie: SalePieType = []; //后端返回的饼图数据数组
let myChart: echarts.ECharts; //实例化图标实例
const options = [
  {
    label: "昨天",
    value: "yesterday",
  },
  {
    label: "今天",
    value: "today",
  },
  {
    label: "前三天",
    value: "three_days",
  },
  {
    label: "前7天",
    value: "seven_days",
  },
  {
    label: "前14天",
    value: "fourteen_days",
  },
];

function keyChange() {
  let key = "";
  if (selectKey.value === "sale_") {
    key = selectKey.value + selectDay.value;
  } else {
    key = selectDay.value + selectKey.value;
  }
  const data = salePie.map((item) => ({
    value: item[key],
    name: item.name,
  }));
  setOptions(data);
}

// 封装函数 设置配置项
function setOptions(data: { name: string; value: string }[]) {
  // 绘制图表
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      width: "400px",
      height: 100,
      top: "20%",
      // left: "right",
      right: 10,
    },
    series: [
      {
        top: "20%",
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        center: ["20%", "50%"],
        label: {
          show: true,
        },

        labelLine: {
          show: true,
          length: 30,
          length2: 40,
        },
        data,
      },
    ],
  });
}

// 请求首页数据
async function fetchData() {
  const res = await http.getAdminStat();
  if (res.errno === 0) {
    salePie = res.data.salePie;
    const data = res.data.salePie.map((item) => ({
      value: item.sale_today,
      name: item.name,
    }));

    // 绘制饼图
    // 基于准备好的dom 初始化echarts实例
    myChart = echarts.init(document.getElementById("main") as HTMLElement);
    setOptions(data);

    // 绘制地图
    const mapData = res.data.saleMap.map((item) => ({
      name: item.areaName,
      value: item.saleNum,
    }));
    echarts.registerMap("china", { geoJSON: chinaJSON } as any);
    var chart = echarts.init(document.getElementById("main1") as HTMLElement);
    chart.setOption({
      tooltip: {
        show: true,
        formatter: "{b0}<br />销量: {c0}",
      },
      visualMap: [
        {
          min: 0,
          max: 1000000,
          inRange: {
            color: ["green", "rgba(3,4,5,0.4)", "red"],
            symbolSize: [30, 100],
          },
        },
      ],
      series: [
        {
          type: "map",
          map: "china",
          data: mapData,
          emphasis: { label: { show: false } },
        },
      ],
    });
  }
}
fetchData();
</script>

<style lang="less" scoped>
.first-term {
  position: sticky;
  left: 0;
  top: 70px;
  z-index: 999;
  background-color: #fff;
  padding: 15px 20px;
  width: 100%;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.selectTop {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 20px;
}
</style>
